<template>
    <el-main>

      <el-form :inline="true" :model="queryForm" class="demo-form-inline">
        <el-form-item label="名称">
          <el-input v-model="queryForm.name" placeholder="名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="el-icon-search" plain round @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="id"
          label="#"
          width="120">
        </el-table-column>
        <el-table-column
          prop="name"
          label="名称"
          width="120">
        </el-table-column>
        <el-table-column
          prop="num"
          label="数量"
          width="120">
        </el-table-column>
        <el-table-column
          prop="price"
          label="价格"
          width="120">
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="info" class="el-icon-search" plain round
              @click="handleDetail(scope.row.id)">查看</el-button>
            <el-button type="primary" class="el-icon-edit" plain round
              @click="handleEdit(scope.row.id)">编辑</el-button>
            <el-button class="el-icon-delete" type="danger" plain round
              @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        layout="prev, pager, next"
        @current-change="gotoPage"
        :page-count="pages">
      </el-pagination>

      <div style="margin-top: 20px">
        <el-button type="primary" class="el-icon-edit" plain round @click="add">添加</el-button>
        <el-button type="danger" class="el-icon-delete" plain round @click="delAll">批量删除</el-button>
      </div>

      <el-dialog
        title="添加/编辑"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <el-form :inline="true" :model="saveForm" class="demo-form-inline">
          <el-form-item label="名称">
            <el-input v-model="saveForm.name" placeholder="名称"></el-input>
          </el-form-item><br/>
          <el-form-item label="数量">
            <el-input v-model="saveForm.num" placeholder="名称"></el-input>
          </el-form-item><br/>
          <el-form-item label="价格">
            <el-input v-model="saveForm.price" placeholder="价格"></el-input>
          </el-form-item><br/>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="save">确 定</el-button>
  </span>
      </el-dialog>
      <!--详情-->
      <el-dialog
        title="详情"
        :visible.sync="DetaildialogVisible"
        width="30%"
        :before-close="handleClose">
        <el-form :inline="true" :model="DetailForm" class="demo-form-inline">
          <el-form-item label="名称">
            {{DetailForm.name}}
          </el-form-item><br/>
          <el-form-item label="数量">
            {{DetailForm.num}}
          </el-form-item><br/>
          <el-form-item label="价格" >
            {{DetailForm.price}}
          </el-form-item><br/>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="DetaildialogVisible = false">关 闭</el-button>
  </span>
      </el-dialog>
    </el-main>
</template>

<script>
  const axios=require("axios");
  const basePath="http://127.0.0.1:8084/"
    export default {
        name: "Goods",
      data() {
        return {
          tableData: [],
          multipleSelection: [],
          queryForm:{
            pageNum:1,
            pageSize:3,
          },
          pages:0,
          dialogVisible:false,
          DetaildialogVisible:false,
          saveForm:{},
          DetailForm:{},
        }
      },

      methods: {
          getList(){
            const self=this;
            axios({
              url:basePath+"selects",
              method:"get",
              params:this.queryForm
            }).then(res=>{
              self.tableData=res.data.list;
              self.pages=res.data.pages;
              console.log(res)
            })
          },
        gotoPage(pageNum){
            this.queryForm.pageNum=pageNum;
            this.getList();
        },
        onSubmit(){
          this.queryForm.pageNum=1;
          this.getList();
        },
        add(){
            this.dialogVisible=true;
            this.saveForm={};
        },
        handleEdit(id){
            this.dialogVisible=true;
          const self=this;
          axios({
            url:basePath+"getById",
            method:"get",
            params:{id:id}
          }).then(res=>{
            self.saveForm=res.data;
            self.getList();
          })
        },
        save(){
            this.dialogVisible=false;
            const self=this;
            axios({
              url:basePath+"save",
              method:"post",
              data:this.saveForm
            }).then(res=>{
              self.getList();
            })

        },
        delAll(){
          const self=this;
          const ids=this.ids;
          if(ids==null){
            self.$message("请选择你要删除的数据！！！");
            return;
          }
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            axios({
              url:basePath+"del",
              method: "get",
              params: {ids:this.ids}
            }).then(res=>{
              self.$message({
                type: 'success',
                message: '删除成功!'
              });
              self.queryForm.pageNum=1;
              self.getList();
            })

          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });

        },
        handleDetail(id){
            this.DetaildialogVisible=true;
          const self=this;
          axios({
            url:basePath+"getById",
            method:"get",
            params:{id:id}
          }).then(res=>{
            self.DetailForm=res.data;
            self.getList();
          })
        },
        handleDelete(id){
          const self=this;
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            axios({
              url:basePath+"del",
              method: "get",
              params: {ids:id}
            }).then(res=>{
              self.$message({
                type: 'success',
                message: '删除成功!'
              });
              self.queryForm.pageNum=1;
              self.getList();
            })

          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        },
        handleSelectionChange(rows) {
            let ids=null;
            rows.forEach(row=>{
              if(ids==null){
                ids=row.id;
              }else {
                ids=ids+","+row.id;
              }
            })
          this.ids=ids;
        },
        handleClose(done) {
          this.$confirm('确认关闭？')
            .then(_ => {
              done();
            })
            .catch(_ => {});
        }
      },
      created(){
        this.getList();
      }
    }
</script>

<style scoped>

</style>
